<!--  -->
<template>
  <view class="container">
    <view class="list">
		
      <view class="addressInfo" v-for="(item, index) in list" :key="item.id">
        <view> <u-icon name="map" size="50"></u-icon> </view>
        <view>
          <view class="user">
            <view class="name">{{ item.name }}</view>
            <view class="phone">{{ item.phone }}</view>
          </view>
          <view class="address"> {{ item.address }} </view>
          <view class="bar">
            <u-button type="error" size="mini" style="margin-right: 10px" >删除</u-button >
            <u-button type="primary" size="mini">编辑</u-button>
          </view>
        </view>
      </view>
	  
    </view>
	
    <view class="addBtn" @click="onJump('/pages/address/addSite',1)">
		<view class="bnts">新建收货地址</view>
	</view>
	
  </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      list: [
        {
          id: 1,
          name: "张三",
          phone: "1111111111",
          address: "四川省成都市武侯区科园二路航利中心A座",
        },
        {
          id: 2,
          name: "李四",
          phone: "2222222222",
          address: "四川省成都市武侯区科园二路航利中心B座",
        },
        {
          id: 3,
          name: "王五",
          phone: "3333333333",
          address: "四川省成都市武侯区科园二路航利中心C座",
        },
        {
          id: 4,
          name: "赵六",
          phone: "4444444444",
          address: "四川省成都市武侯区科园二路航利中心D座",
        },
        {
          id: 5,
          name: "田七",
          phone: "5555555555",
          address: "四川省成都市武侯区科园二路航利中心E座",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
	  
	onJump(url,t){
		switch (t){
			case 1:
				// 保留当前页面，跳转到应用内的某个页面
				uni.navigateTo({url:url})
				break;
			case 2:
				// 关闭当前页面，跳转到应用内的某个页面。
				uni.redirectTo({url:url})
				break;	
			case 3:
				// 关闭所有页面，打开到应用内的某个页面。
				uni.reLaunch({url:url})
				break;
			case 4:
				// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
				uni.switchTab({url:url})
				break;	
		}
	},    
	  
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
	page{background-color: #f5f5f5;background: #f5f5f5;}
.container{background-color: #f5f5f5;padding-bottom: 300rpx;min-height: 100%;}
.list {
  .addressInfo {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    & > view:first-child {
      margin-right: 32rpx;
    }
    .user {
      display: flex;
      align-items: center;
      .name {
        margin-right: 40rpx;
        font-size: 36rpx;
        font-weight: bold;
      }
    }
    .address {
      color: #bbb;
      font-size: 28rpx;
      margin: 10rpx 0;
    }
  }
}
.addBtn{
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    text-align: center;
    background-color: #07c601;
    color: #fff;
    z-index: 999;
	
	.bnts{ height: 96rpx;line-height: 96rpx;font-size: 30rpx;}
	
}

@supports (padding-bottom: constant(safe-area-inset-bottom)) or (padding-bottom: env(safe-area-inset-bottom)){
	.addBtn{padding-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom));padding-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));}
}

</style>